<template>
  <div class="date-selector">
    <el-date-picker
      v-model="date"
      type="date"
      :size="isMobile ? 'large' : 'default'"
      placeholder="选择日期"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      @change="handleChange"
    />
    <el-button 
      type="primary" 
      :icon="Calendar"
      :size="isMobile ? 'large' : 'default'"
      @click="goToToday"
    >
      今天
    </el-button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Calendar } from '@element-plus/icons-vue'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

// eslint-disable-next-line
const emit = defineEmits(['update:modelValue', 'change'])
// eslint-disable-next-line
const props = defineProps({
  modelValue: {
    type: String,
    required: true
  }
})

const date = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const handleChange = (val) => {
  emit('change', val)
}

const goToToday = () => {
  const today = new Date().toISOString().split('T')[0]
  date.value = today
  emit('change', today)
}
</script>

<style scoped>
.date-selector {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .date-selector {
    flex-direction: column;
  }
  
  :deep(.el-date-picker) {
    width: 100%;
  }
  
  .el-button {
    width: 100%;
  }
}
</style> 